/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, InputLine, TextArea, Input, BlobInputList, CCell, Table, TableHead, TableRow, TableBody, Cell,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps,  useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import { objNestSet} from "../../../common/tool";
import {DirectLink} from "../../../routing/Link";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";
import {useOmnipotentPrefCs, useOmnipotentPrefTitle} from "../../hook/useOmnipotentPref";

export const items现场施 = [
    ['资质', [], '是否具备相应的资质',   ],
    ['质量体', [], '是否建立质量保证体系并有效实施',   ],
    ['资格', [], '人员配备是否齐全并具有相应资格',   ],
    ['组织设', [], '施工组织设计（或无损检测工艺文件）是否符合要求',   ],
    ['规定试', [], '是否按有关规定和标准对管道工程进行各种检验及试验',   ],
    ['反馈处', [], '施工（或检测）中发现的质量问题是否及时反馈和处理',   ],
    ['转包', [], '是否有违法分包、转包管道施工（或检测）项目行为',   ],
    ['失职', [], '是否有其他安全质量管理不当（违法、违规、失职）行为等',   ],
        //用户录入的2个
    ['现它1', [], ' ' ],
    ['现它2', [], ' ' ]
];

export const itemA现场施工: string[] = ['现场备注'];
items现场施.forEach(([name, title, initIsp], i: number) => {
    itemA现场施工.push(name as string);
});
export const 施工情况选=['符合','未发现','符合要求','否','无'];

export const SiteConstruct =
React.forwardRef((
    {children, show, alone = true, redId, nestMd, label,}: InternalItemProps, ref
) => {
    //共用的 “itemA宏观检验” 两个编辑器都会提取字段的。
    const [getInpFilter] = useMeasureInpFilter(null, itemA现场施工,);
    const {inp, setInp} = useItemInputControl({ref});
    const config =React.useMemo(()=>{
        items现场施[8][2]=inp?.现它1?.t;
        items现场施[9][2]=inp?.现它2?.t;
        return items现场施;
    },[inp?.现它1, inp?.现它2]);
    const titNode=useOmnipotentPrefTitle({config });

    return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                nestMd={nestMd} alone={alone} label={label!}>
        <Text>{label}：</Text>
        {config.map(([name, _1, _2, unit]: any, i: number) => {
            return (<React.Fragment key={i}>
                <div css={{display: 'flex',flexWrap:'wrap',alignItems:'center'}}>
                    {titNode[i]}
                    { i>=8 && <InputLine  label={`第${i+1}项的,可增加的检验项目的标题`}>
                        <Input value={inp?.[name]?.t || ''}  size={2} style={{display: 'inline-flex', width: 'unset'}}
                               onChange={e => objNestSet(name,'t', e.currentTarget.value||undefined,inp,setInp) }/>
                    </InputLine>
                    }
                    &nbsp;施工单位：
                    <BlobInputList  value={inp?.[name]?.c ||''} datalist={施工情况选}
                                    style={{display: 'inline-flex', width: '12rem'}}  rows={1}
                                    onListChange={v => objNestSet(name,'c', v||undefined,inp,setInp) } />
                    {unit}
                    &nbsp;检测机构：
                    <BlobInputList  value={inp?.[name]?.m ||''} datalist={施工情况选}
                                    style={{display: 'inline-flex', width: '12rem'}}  rows={1}
                                    onListChange={v => objNestSet(name,'m', v||undefined,inp,setInp) } />
                </div>
            </React.Fragment>);
        })}
        <hr/>
        <Text variant="h4">备注：</Text>
        <TextArea  value={inp?.现场备注 ||''} rows={8}
                   onChange={e => setInp({ ...inp, 现场备注: e.currentTarget.value||undefined}) } />
    </InspectRecordLayout>;
});

const tailRender=(orc: any, name: string)=><>
    <CCell>{orc?.[name]?.c??'／'}</CCell>
    <CCell>{orc?.[name]?.m??'／'}</CCell>
</>;
//先前版本是用useFixRowPrefUnt；
export const SiteConstructVw= ({orc, rep} :{orc:any, rep:any}
) => {
    const configNew =React.useMemo(()=>{
        const mainp=items现场施.slice(0,8);
        let arr= [] as string[];
        for(let i = 0; i < 2; i++) {
            const name='现它'+(i+1);
            if(orc?.[name]?.t)   arr.push(name);
        }
        const rspanA=arr.length;
        let add=[];
        for(let k = 0; k < rspanA; k++) {
            const name=arr[k];
            add.push( [name,  [ ],  orc?.[name]?.t ] );
        }
        return [...mainp, ...add ];
    },[orc?.现它1, orc?.现它2]);
        // const [renders]=useFixRowPrefUnt({orc, rep, config:items现场施, tailRender, });
    const [renderP1] = useOmnipotentPrefCs({orc, config: configNew,
                     tag:'SiteConstruct', tailRender, pcols: 1, noNo: false, unitCel: false,});
    return <>
        <div css={{"@media print": {paddingBottom: '5rem', pageBreakInside: 'avoid'}} }>
            <Text id='SiteConstruct' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
            }}>受检单位基本情况及现场施工情况报告</Text>
            <div css={{display: 'flex', justifyContent: 'space-between'}}>
                <Text></Text>
                <Text>报告编号：{rep.isp.no}</Text>
            </div>
        </div>
        <Table fixed={["4.5%", "5%", "%",  "29%", "29%"]} css={{borderCollapse: 'collapse', "@media print": {marginTop: '-5rem'}}} tight  miniw={800}>
            <TableHead>
                <TableRow>
                    <CCell><Text css={{fontSize:'0.75rem'}}>序号</Text></CCell><CCell colSpan={2}>项目内容</CCell><CCell>施工单位</CCell><CCell>检测机构</CCell>
                </TableRow>
            </TableHead>
            <TableBody>
                <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/SiteConstruct#SiteConstruct`}>
                    {renderP1}
                    <TableRow>
                        <Cell colSpan={5}><div css={{minHeight: '2rem',whiteSpace:'pre-wrap'
                        }}>备注：<br/>{orc.现场备注 || '／'}</div></Cell>
                    </TableRow>
                </DirectLink>
            </TableBody>
        </Table>
        <TailMenRowIspCheck orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}/>
    </>;
};
